<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态表格</title>
		<style type="text/css">
			table,
			td {
				border: 1px solid #000000;
				border-collapse: collapse;
				width: 800px;
				height: 50px;
				text-align: center;
			}

			a {
				text-decoration: none;
				color: #000000;
			}

			a:hover {
				color: #FF0000;
			}
		</style>
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_2855974_9khnedgkd9u.css" />
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			$(function(){
				$(":button").eq(0).click(function(){
					/* $("#data").html($("#data").html() + "<tr>\
					<td><input class='ck' type='checkbox' /></td>\
					<td></td><td></td>\
					<td><a class='iconfont icon-shanchu' href='#'></a></td></tr>"); */
					
					$("#data").append("<tr>\
					<td><input class='ck' type='checkbox' /></td>\
					<td></td><td></td>\
					<td><a class='iconfont icon-shanchu' href='#'></a></td></tr>");
				});
				
				$(".icon-shanchu").click(function(){
					//连续获取两次父节点,得到行对象,然后掉remove()方法
					$(this).parent().parent().remove();
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="添加一行" />
		<input type="button" value="删除选中行" />
		<input type="button" value="全选" />
		<input type="button" value="不选" />
		<input type="button" value="反选" />
		<hr />
		<table>
			<tbody id="data">
				<tr>
					<td>
						<input class="ck" type="checkbox" />
					</td>
					<td></td>
					<td></td>
					<td>
						<a class="iconfont icon-shanchu" href="#"></a>
					</td>
				</tr>
				<tr>
					<td>
						<input class="ck" type="checkbox" />
					</td>
					<td></td>
					<td></td>
					<td>
						<a class="iconfont icon-shanchu" href="#"></a>
					</td>
				</tr>
				<tr>
					<td>
						<input class="ck" type="checkbox" />
					</td>
					<td></td>
					<td></td>
					<td>
						<a class="iconfont icon-shanchu" href="#"></a>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
